<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f0f2f5;
      margin: 0;
      padding: 0;
      color: #333;
    }
    .container {
      max-width: 1200px;
      margin: 20px auto;
      padding: 20px;
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      display: flex;
      gap: 20px;
    }
    .form-section, .table-section {
      flex: 1;
    }
    .form-section {
      max-width: 500px;
    }
    .table-section {
      flex: 2;
      overflow: auto;
    }
    h1, h2 {
      color: #2c3e50;
      margin-bottom: 20px;
    }
    .form-section form {
      margin-bottom: 20px;
      padding: 20px;
      border: 1px solid #ddd;
      border-radius: 8px;
      background: #fafafa;
    }
    .form-group {
      margin-bottom: 10px;
    }
    .form-group label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
      font-size: 14px;
      color: #333;
    }
    .form-group select, .form-group input[type="date"] {
      width: 100%;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 14px;
      box-sizing: border-box;
    }
    input[type="button"] {
      background-color: #007bff;
      color: white;
      border: none;
      padding: 10px 16px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      font-weight: bold;
    }
    input[type="button"]:hover {
      background-color: #0056b3;
    }
    .refresh-button {
      background-color: #28a745;
      color: white;
      border: none;
      padding: 6px 12px; /* Smaller padding */
      border-radius: 4px;
      cursor: pointer;
      font-size: 12px; /* Smaller font size */
      font-weight: bold;
    }
    .refresh-button:hover {
      background-color: #218838;
    }
    .tabs {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 10px;
      gap: 5px;
    }
    .tab-button {
      padding: 6px 12px;
      border: 1px solid #ddd;
      border-radius: 4px;
      background-color: #f8f9fa;
      font-size: 12px;
      font-weight: bold;
      cursor: pointer;
      text-align: center;
      flex: 1 1 auto;
    }
    .tab-button.active {
      background-color: #007bff;
      color: white;
    }
    .month-tabs {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 10px;
      gap: 5px;
      margin-top: 10px;
    }
    .month-tab-button {
      padding: 4px 8px;
      border: 1px solid #ddd;
      border-radius: 4px;
      background-color: #e9ecef;
      font-size: 10px;
      font-weight: bold;
      cursor: pointer;
      text-align: center;
      flex: 1 1 auto;
    }
    .month-tab-button.active {
      background-color: #007bff;
      color: white;
    }
    .search-section {
      display: flex;
      flex-direction: column;
    }
    .search-section .form-group {
      margin-bottom: 15px;
    }
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
      font-size: 14px;
    }
    th {
      background-color: #007bff;
      color: white;
    }
    tr:nth-child(even) {
      background-color: #f9f9f9;
    }
    tr:hover {
      background-color: #e2e6ea;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="form-section">
      <h1>Submit Your Business Data</h1>
      <form id="dataForm">
        <div class="form-group">
          <label for="name">Name:</label>
          <select id="name" name="name" required>
            <option value="">Select...</option>
            <option value="Alice Johnson">Alice Johnson</option>
            <option value="Bob Smith">Bob Smith</option>
            <option value="Charlie Brown">Charlie Brown</option>
            <option value="Diana Prince">Diana Prince</option>
          </select>
        </div>

        <div class="form-group">
          <label for="date">Date:</label>
          <input type="date" id="date" name="date" required>
        </div>

        <div class="form-group">
          <label for="hours">Duration (hours):</label>
          <select id="hours" name="hours" required>
            <option value="">Select...</option>
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
          </select>
        </div>

        <div class="form-group">
          <label for="minutes">Duration (minutes):</label>
          <select id="minutes" name="minutes" required>
            <option value="">Select...</option>
            <option value="0">0</option>
            <option value="15">15</option>
            <option value="30">30</option>
            <option value="45">45</option>
            <option value="60">60</option>
            <option value="75">75</option>
            <option value="90">90</option>
            <option value="105">105</option>
            <option value="120">120</option>
          </select>
        </div>

        <div class="form-group">
          <label for="reason">Reason:</label>
          <select id="reason" name="reason" required>
            <option value="">Select...</option>
            <option value="Vacation">Vacation</option>
            <option value="Sick Leave">Sick Leave</option>
            <option value="Personal">Personal</option>
          </select>
        </div>

        <input type="button" value="Submit" onclick="submitData()">
      </form>
    </div>

    <div class="table-section">
      <div class="search-section">
        <div class="form-group search">
          <label for="search-name">Search by Name:</label>
          <input type="text" id="search-name" onkeyup="filterTable()" placeholder="Search for names...">
        </div>

        <div class="form-group search">
          <label for="search-date">Search by Date:</label>
          <input type="date" id="search-date" onchange="filterTable()">
        </div>

        <input type="button" class="refresh-button" value="Refresh" onclick="fetchData()">

        <h2>Submitted Data</h2>
        <div class="tabs" id="year-tabs"></div>
        <div id="month-tabs" class="month-tabs"></div>
        <div id="data-table"></div>
      </div>
    </div>
  </div>

  <script>
    const months = [
      'January', 'February', 'March', 'April', 'May', 'June',
      'July', 'August', 'September', 'October', 'November', 'December'
    ];
    
    const years = [2023, 2024]; // Add more years as needed

    function submitData() {
      const name = document.getElementById('name').value;
      const date = document.getElementById('date').value;
      const hours = document.getElementById('hours').value;
      const minutes = document.getElementById('minutes').value;
      const reason = document.getElementById('reason').value;

      // Combine hours and minutes into a single duration string
      const duration = `${hours}h ${minutes}m`;

      google.script.run.saveData(name, date, duration, reason);
      document.getElementById('dataForm').reset();
      fetchData();
    }

    function fetchData() {
      google.script.run.withSuccessHandler(displayData).getData();
    }

    function displayData(data) {
      const yearTabs = document.getElementById('year-tabs');
      const monthTabs = document.getElementById('month-tabs');
      const dataTable = document.getElementById('data-table');

      yearTabs.innerHTML = '';
      monthTabs.innerHTML = '';
      dataTable.innerHTML = '';

      // Create year tabs
      years.forEach(year => {
        const yearTab = document.createElement('div');
        yearTab.className = 'tab-button';
        yearTab.textContent = year;
        yearTab.onclick = () => showYearTab(year);
        yearTabs.appendChild(yearTab);
      });

      // Determine the current month and year
      const now = new Date();
      const currentMonth = months[now.getMonth()];
      const currentYear = now.getFullYear();

      function showYearTab(year) {
        yearTabs.querySelectorAll('.tab-button').forEach(button => {
          button.classList.remove('active');
        });
        yearTabs.querySelector(`.tab-button:nth-child(${years.indexOf(year) + 1})`).classList.add('active');
        
        // Create month tabs for the selected year
        monthTabs.innerHTML = '';
        months.forEach((month, index) => {
          const monthTab = document.createElement('div');
          monthTab.className = 'month-tab-button';
          monthTab.textContent = month.substring(0, 3); // Shorten month names
          monthTab.onclick = () => showMonthTab(month, year);
          monthTabs.appendChild(monthTab);
        });

        // Show the current month by default
        showMonthTab(currentMonth, year);
      }

      function showMonthTab(month, year) {
        monthTabs.querySelectorAll('.month-tab-button').forEach(button => {
          button.classList.remove('active');
        });
        monthTabs.querySelector(`.month-tab-button:nth-child(${months.indexOf(month) + 1})`).classList.add('active');
        
        const filteredData = data.filter(row => {
          const rowDate = new Date(row[1]);
          return rowDate.getMonth() === months.indexOf(month) && rowDate.getFullYear() === year;
        });

        // Create table
        const table = document.createElement('table');
        const thead = document.createElement('thead');
        const tbody = document.createElement('tbody');

        // Create table header
        const headers = ['#', 'Name', 'Date', 'Duration', 'Reason'];
        const headerRow = document.createElement('tr');
        headers.forEach(headerText => {
          const th = document.createElement('th');
          th.textContent = headerText;
          headerRow.appendChild(th);
        });
        thead.appendChild(headerRow);
        
        // Create table body
        filteredData.forEach((row, index) => {
          const tr = document.createElement('tr');
          const rowNumber = index + 1;

          // Add row number cell
          const cellNumber = document.createElement('td');
          cellNumber.textContent = rowNumber;
          tr.appendChild(cellNumber);

          row.forEach(cellData => {
            const td = document.createElement('td');
            td.textContent = cellData;
            tr.appendChild(td);
          });

          tbody.appendChild(tr);
        });

        table.appendChild(thead);
        table.appendChild(tbody);
        dataTable.innerHTML = '';
        dataTable.appendChild(table);
      }

      showYearTab(currentYear);
    }

    function filterTable() {
      const searchName = document.getElementById('search-name').value.toLowerCase();
      const searchDate = document.getElementById('search-date').value;

      const rows = document.querySelectorAll('#data-table table tbody tr');

      rows.forEach(row => {
        const cells = row.querySelectorAll('td');
        const name = cells[1].textContent.toLowerCase();
        const date = cells[2].textContent;

        if ((searchName === '' || name.includes(searchName)) &&
            (searchDate === '' || date === searchDate)) {
          row.style.display = '';
        } else {
          row.style.display = 'none';
        }
      });
    }

    window.onload = fetchData;
  </script>
</body>
</html>
